<!-- Created by 337547038  -->
<template>
  <el-dropdown>
    <div class="header-avatar" style="cursor: pointer">
      <el-avatar
        class="avatar"
        size="small"
        shape="circle"
        v-if="user.avatar"
        :src="user.avatar"
      />
      <div class="userImg" v-else>{{ user.name }}</div>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          ><el-icon><User /></el-icon>
          <span class="title">个人中心</span>
        </el-dropdown-item>
        <el-dropdown-item @click="logout"
          ><el-icon><CircleClose /></el-icon>
          <span class="title">退出登录</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
  import { computed, ref, onMounted, nextTick } from 'vue'
  const props = withDefaults(
    defineProps<{
      modelValue?: string
      disabled?: boolean
    }>(),
    {}
  )

  const emits = defineEmits<{
    (e: 'update:modelValue', value: string): void
  }>()

  const user = ref({
    name: 'admin',
    avatar: ''
  })
  const logout = () => {}

  onMounted(() => {
    nextTick(() => {})
  })
</script>
<style scoped>
  .userImg {
    margin-right: 8px;
    border-radius: 50%;
    background: #c0c4cc;
    font-size: 14px;
    width: 24px;
    height: 24px;
  }
</style>
